<style>
    .layui-form.layui-form-info .layui-form-item {
        margin-bottom: 0 !important;
    }

    .layui-input-block.layui-word-aux {
        word-break: break-all;
        padding: 9px 0 !important;
        box-sizing: border-box !important;
    }

</style>
<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <!-- 表格工具栏 -->
            <form class="layui-form toolbar">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">操作日期:</label>
                        <div class="layui-input-inline">
                            <input name="time" class="layui-input icon-date" placeholder="选择日期范围"
                                   autocomplete="off"/>
                        </div>
                    </div>
                    <div class="layui-inline">&nbsp;
                        <button class="layui-btn layui-btn-sm icon-btn" lay-filter="operRecordTbSearch" lay-submit>
                            <i class="layui-icon">&#xe615;</i>
                        </button>
                        <button id="operRecordExportBtn" class="layui-btn layui-btn-sm layui-btn-primary icon-btn" type="button">
                            <i class="layui-icon">&#xe67d;</i>
                        </button>
                    </div>
                </div>
            </form>
            <!-- 数据表格 -->
            <table id="operRecordTable" lay-filter="operRecordTable"></table>
        </div>
    </div>
</div>
<script>
    layui.use(['layer', 'form', 'table', 'tableX', 'util', 'laydate', 'admin'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var tableX = layui.tableX;
        var util = layui.util;
        var laydate = layui.laydate;
        var admin = layui.admin;

        /* 渲染表格 */
        var insTb = tableX.render({
            elem: '#operRecordTable',
            url: layui.setter.baseServer + '/system/get_log',
            page: true,
            height: 'full-235',
            cellMinWidth: 120,
            cols: [[
                {type: 'numbers'},
                {field: 'uid', title: 'uid', width: 100, minWidth: 100},
                {field: 'name', title: '用户名',  width: 100, minWidth: 100},
                {field: 'query', title: '请求地址', align: 'left'},
                {field: 'method', title: '方式',  width: 80, minWidth: 80},
                {
                    field: 'code', title: '状态', templet: function (d) {
                        return d.code=='200'? '<span class="layui-badge layui-badge-green">正常</span>':'<span class="layui-badge layui-badge-red" >异常</span>';
                    }, align: 'center', width: 80, minWidth: 80
                },
                {field: 'msg', title: '提示信息', minWidth: 140},
                {field: 'time', title: '操作时间', width: 200},
            ]],
            size:'sm'
        });

        /* 时间范围 */
        laydate.render({
            elem: 'input[name="time"]',
            type: 'date',
            value: new Date(),
            range: false,
            trigger: 'click'
        });

        /* 表格搜索 */
        form.on('submit(operRecordTbSearch)', function (data) {
            insTb.reload({where: data.field, page: {curr: 1}});
            return false;
        });

        /* 表格工具条点击事件 */
        table.on('tool(operRecordTable)', function (obj) {
            if ('info' === obj.event) { // 详情
                admin.open({
                    type: 1,
                    title: '详情',
                    area: '600px',
                    data: obj.data,
                    tpl: true,
                    content: $('#operRecordInfoDialog').html()
                });
            }
        });

        /* 导出excel */
        $('#operRecordExportBtn').click(function () {
            var token = layui.setter.getToken() || {};
            tableX.exportDataX({
                cols: [[
                    {field: 'username', title: '账号'},
                    {field: 'nickname', title: '用户名'},
                    {field: 'model', title: '操作模块'},
                    {field: 'description', title: '操作功能'},
                    {field: 'url', title: '请求地址'},
                    {field: 'requestMethod', title: '请求方式'},
                    {field: 'operMethod', title: '调用方法'},
                    {field: 'param', title: '请求参数'},
                    {field: 'result', title: '返回结果'},
                    {field: 'ip', title: 'ip地址'},
                    {field: 'comments', title: '备注'},
                    {
                        title: '状态', templet: function (d) {
                            return ['正常', '异常'][d.state] || '';
                        }
                    },
                    {
                        title: '耗时', templet: function (d) {
                            return d.spendTime / 1000 + 's';
                        }
                    },
                    {
                        title: '操作时间', templet: function (d) {
                            return util.toDateString(d.createTime);
                        }
                    }
                ]],
                data: layui.setter.baseServer + '/sys/operRecord/page?page=1&limit=2000',
                fileName: '操作日志',
                option: {
                    headers: {
                        'Authentication': token.token_type + ' ' + token.access_token
                    }
                }
            });
        });

    });
</script>
